<template>
    <div class="role" v-if="roleInfoShow">
        <div class="role-info">
            <div  class="role-info-main">
                <div class="role-info-main-title">一.规则:</div>
                <p>1.旅行红包可以与会员优惠叠加使用</p>
                <p>2.旅行红包间不能叠加使用，单次订单只能使用一张旅行红包</p>
                <div class="role-info-main-title">二.旅行红包介绍:</div>
                <p class="role-info-main-subhead">（一）新人旅行红包</p>
                <p>金额：¥50</p>
                <p>领取时间：2019.01.18 - 2019.12.31</p>
                <p>使用时间：2019.01.18 - 2019.12.31</p>
                <p>获取方法：用户首次注册移动商城即可获得新人红包</p>
                <p>使用方法：满￥100元可用，适用于所有商品</p>
                <p class="role-info-main-subhead">（二）新春活动旅行红包</p>
                <p>金额：¥88</p>
                <p>领取时间：即日-2019.2.19</p>
                <p>使用时间：2019.2.3-2019.2.20</p>
                <p>获取方法：在移动商城首页轮播图中点击领取或在【我的】-【旅行红包领取】中领取，获得的新春活动旅行红包会在【我的旅行红包】中展示</p>
                <p>使用方法：无门槛，适用于所有商品</p>
                <p class="role-info-main-subhead">（三）邀请新会员红包</p>
                <p>金额：¥80</p>
                <p>领取时间：2019.01.29 - 2019.12.31</p>
                <p>使用时间：2019.01.29 - 2019.12.31</p>
                <p>获取方法：在【我的】-【旅行红包领取】中完成“邀请新会员红包”任务，即可获得邀请新会员红包，邀请一位新会员获得一张邀请新会员红包，多邀请新会员多得红包，数量无上限。获得红包会在【我的旅行红包】中展示</p>
                <p>使用方法：满800元可用，适用于所有商品</p>
                <p class="role-info-main-subhead">（四）晒下单红包</p>
                <p>金额：¥100</p>
                <p>领取时间：2019.01.18 - 2019.12.31</p>
                <p>使用时间：2019.01.18 - 2019.12.31</p>
                <p>获取方法：用户下单后，可分享至朋友圈或好友，并邀请至少一位好友注册商城会员，即可在【我的】-【旅行红包领取】中获得晒下单红包，完成一次任务获得一张晒下单红包。单次订单只能获得一张晒下单红包，多个订单可以分别晒出，完成任务获得相应数量的晒下单红包。获得红包会在【我的旅行红包】中展示</p>
                <p>使用方法：满1000元减100元，适用于所有商品</p>
                <p class="role-info-main-subhead">（五）晒评论红包</p>
                <p>金额：¥100</p>
                <p>领取时间：2019.01.25 - 2019.12.31</p>
                <p>使用时间：2019.01.25 - 2019.12.31</p>
                <p>获取方法：用户完成出行对订单进行评价后，在【我的】-【旅行红包领取】中完成“晒评论红包”任务，即可获得晒评论红包，晒一次评价获得一张晒评论红包。单次订单评价只能获得一张晒评论红包，多个订单的评价可以分别晒出，获得相应数量的晒评论红包。获得红包会在【我的旅行红包】中展示</p>
                <p>使用方法：满1000元减100元，适用于所有商品</p>
                <div class="role-info-main-title">最终解释权归快帮行所有</div>
            </div>
            <div class="role-info-close" @click="closeRole"></div>
        </div>
    </div>
</template>

<script>
    import store from '../store/store'
    export default {
        name: "role",
        props: ['roleInfoShow'],
        data(){
            return{
                // roleInfoShow:true,
            }
        },
        created(){
            
        },
        methods:{
            closeRole(){
                this.$emit('closeRole',false)
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .role{
        position: fixed;
        z-index: 10002;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.5);
        box-shadow: 0 0 rpx(20) #666;
        min-height: 100%;
        &-info{
            position: fixed;
            left: 50%;
            top: 22%;
            z-index: 10001;
            margin-left: rpx(-350);
            margin-top: -25%;
            box-shadow: 0 0 rpx(20) #666;
            border-radius: rpx(10);
            background: #fff;
            width:rpx(700);
            height: rpx(1000);
            background-image: url(../assets/rulebg.jpg);
            background-size: 100%;
            &-main{
                box-sizing: border-box;
                height: rpx(700);
                margin:rpx(140) rpx(50) 0 rpx(50);
                line-height: 160%;
                color: #5D5D5D;
                overflow: hidden;
                overflow-y: auto;
                font-size: rpx(28);
                &-title{
                    color: #262626;
                    font-weight: 600;
                    padding: rpx(10) 0;
                    font-size: rpx(30);
                }
                &-subhead{
                    font-weight: 500;
                }
            }
            &-close{
                margin: rpx(20) rpx(200) 0 rpx(200);
                height: rpx(100);
            }
        }
    }
</style>
